<template>
    <div class="groupingDesign">
        <div class="groupingDesign-head">{{ i18n('list.name', '你已经选中') }}{{pitchOn }}{{ i18n('list.element', '个元素') }}</div>
        <span style="display: block;margin-top: 20px">{{ i18n('list.left', '左对齐') }}</span>
        <div class="groupingDesign-icon">
            <rx-icon-show icon="icon-fillzuoduiqi" :title="i18n('list.left','左对齐')" @click="alignLeft"></rx-icon-show>
            <rx-icon-show icon="icon-filldingbuduiqi" :title="i18n('list.top','顶部对齐')" @click="alignTop"></rx-icon-show>
            <rx-icon-show icon="icon-filldibuduiqi" :title="i18n('list.bottom','底部对齐')" @click="alignBottom"></rx-icon-show>
            <rx-icon-show icon="icon-fillyouduiqi" :title="i18n('list.right','右对齐')" @click="alignRight"></rx-icon-show>
        </div>
        <span style="display: block;margin-top: 20px">{{ i18n('list.heightFollow', '宽高跟随') }}</span>
        <div class="follow-list">
            <div :title="i18n('list.smallHeight','跟随小高度')" class="follow-list-common" style="margin-right: 10px"
                 @click="folloHeight('min')">
                <rx-icon-show icon="icon-fillx-gaodugensui" ></rx-icon-show>
                <span>{{ i18n('list.smallHeight', '跟随小高度') }}</span>
            </div>
            <div :title="i18n('list.largeHeight','跟随大高度')" class="follow-list-common" @click="folloHeight('max')">
                <rx-icon-show icon="icon-filld-gaodugensui" ></rx-icon-show>
                <span>{{ i18n('list.largeHeight', '跟随大高度') }}</span>
            </div>
            <div :title="i18n('list.smallWidth','跟随小宽度')" class="follow-list-common" @click="folloWidth('min')"
                 style="margin-right: 10px">
                <rx-icon-show icon="icon-fillx-kuandugensui" ></rx-icon-show>
                <span>{{ i18n('list.smallWidth', '跟随小宽度') }}</span>
            </div>
            <div :title="i18n('list.largeWidth','跟随大宽度')" class="follow-list-common" @click="folloWidth('max')">
                <rx-icon-show icon="icon-filld-kuandugensui" ></rx-icon-show>
                <span>{{ i18n('list.largeWidth', '跟随大宽度') }}</span>
            </div>
        </div>
        <a-button class="groupingDesign-merge" @click="alignMerge">{{ i18n('list.merge', '合并') }}</a-button>
        <a-button class="groupingDesign-merge" @click="quitChecked" type="danger">
            {{ i18n('list.selection', '退出多选状态') }}
        </a-button>
    </div>
</template>

<script>
import {Util} from "@lowcode/jpaas-base-lib";

export default {
    name: "groupingDesign",
    props: ['pitchOn', 'components', 'scrollWidth'],
    data() {
        return {
            list: [],
            componentsList: [],
        }
    },
    mounted() {
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "designLang", key);
        },
        //左边对齐
        alignLeft() {
            this.setFilter();
            //算出最左边坐标
            let obj = this.list[0]
            this.list.filter(res => {
                if (res.left < obj.left) {
                    obj = res;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.left = obj.left;
                    res.coordinate = obj.coordinate;
                }
                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
        //顶部对齐
        alignTop() {
            this.setFilter();
            let obj = this.list[0]
            this.list.filter(res => {
                if (res.top < obj.top) {
                    obj = res;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.top = obj.top;
                }
                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
        //底部对齐
        alignBottom() {
            this.setFilter();
            let obj = this.list[0];
            let bottom = obj.top + obj.height
            this.list.filter(res => {
                let bottom_ = res.top + res.height
                if (bottom_ > bottom) {
                    bottom = bottom_;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.top = bottom - res.height;
                }
                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
        //右边对齐
        alignRight() {
            this.setFilter();
            let obj = this.list[0];
            let right = obj.left + obj.width
            this.list.filter(res => {
                let right_ = res.left + res.width
                if (right_ > right) {
                    right = right_;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.left = right - res.width;
                    res.coordinate = (right - res.width) / this.scrollWidth;
                }

                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
        //合并
        alignMerge() {
            this.list = [];
            this.componentsList = [];
            this.components.filter(res => {
                if (!res.active || res.child) {
                    this.componentsList.push(res)
                } else {
                    let res_ = JSON.parse(JSON.stringify(res))
                    res_.draggable = false;
                    res_.resizable = false;
                    res_.active = false;
                    this.list.push(res_)
                }
            })
            if (this.list.length >= 2) {
                this.timeMergeFile(this.list)
            }
        },
        /*
        合并分组
        */
        timeMergeFile(list) {
            //计算合成坐标
            let left = 10000000;
            let top = 10000000;
            let maxW = 0;
            let maxH = 0;
            list.filter(res => {
                if (res.left <= left) {
                    left = res.left
                }
                if (res.top <= top) {
                    top = res.top;
                }
                let minw = res.left + res.width;
                if (maxW <= minw || maxW == 0) {
                    maxW = minw;
                }
                let minh = res.top + res.height;
                if (maxH <= minh || maxH == 0) {
                    maxH = minh;
                }
            })
            let coordinate_ = left / this.scrollWidth;
            let adaptWidth_ = (maxW - left + 10) / this.scrollWidth;
            list = list.filter(_o => {
                _o.top = _o.top - top;
                _o.left = _o.left - left;
                _o['adaptWidth'] = _o.width / (maxW - left)
                _o['coordinate'] = _o.left / (maxW - left)
                return _o
            })
            let obj = {
                'width': maxW - left, //元素宽度
                'height': maxH - top,//元素高度
                'top': top,//元素初始化top位置
                'left': left / coordinate_,//元素初始化left位置
                'draggable': true,//是否可以拖拽
                'resizable': false,//是否可以控制元素拖拽大小
                'minw': maxW - left,//拖拽元素最小的宽度
                'minh': maxH - top,//拖拽元素最小的高度
                'axis': 'both',//定义元素可拖动的轴。 可用值为x，y，both或none
                'parentLim': true,//是否可以拖出去范围
                'snapToGrid': false,
                'aspectRatio': false,
                'active': true,
                'adaptWidth': adaptWidth_,
                'coordinate': coordinate_,
                'id': Math.random() * 1000,
                'name': this.i18n("list.group", "分组") + '+' + Util.randomId(),
                child: list
            }
            this.componentsList.push(obj);

            this.$emit('groupingDesign', this.componentsList)
        },
        setFilter() {
            this.list = []
            this.components.filter(res => {
                if (res.active) {
                    this.list.push(res)
                }
            })
        },
        //退出多选
        quitChecked() {
            this.componentsList = this.components.filter(res => {
                res.active = false;
                if (res.child) {
                    res.child = res.child.filter(type => {
                        type.active = false;
                        return type
                    })
                }
                return res
            })
            this.$emit('groupingDesign', this.componentsList, true)
        },
        //宽度跟随最大
        folloWidth(type) {
            this.setFilter();
            let obj = this.list[0];
            this.list.filter(res => {
                if (type == 'max' && res.width >= obj.width) {
                    obj = res;
                } else if (type == 'min' && res.width <= obj.width) {
                    obj = res;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.width = obj.width;
                    res.adaptWidth = obj.adaptWidth;
                }

                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
        folloHeight(type) {
            this.setFilter();
            let obj = this.list[0];
            this.list.filter(res => {
                if (type == 'max' && res.height >= obj.height) {
                    obj = res;
                } else if (type == 'min' && res.height <= obj.height) {
                    obj = res;
                }
            })
            this.componentsList = this.components.filter(res => {
                if (res.active) {
                    res.height = obj.height;
                }

                return res
            })
            this.$emit('groupingDesign', this.componentsList)
        },
    }
}
</script>

<style scoped>
.follow-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
}

.follow-list-common {
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #dedede;
    flex: 0 0 calc(50% - 10px);
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.follow-list-common span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
}

.follow-list-common:hover {
    border: solid 1px #4285f4;
    color: #4285f4;
}

.follow-list-common i {
    margin-right: 5px;
    font-size: 20px;
}

.groupingDesign {
    width: 100%;
}

.groupingDesign-head {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
    border: solid 1px #4285f4;
    color: #4285f4;
}

.groupingDesign-icon i {
    margin-right: 20px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 20px;
}

.groupingDesign-icon i:hover {
    color: #4285f4;
}

.groupingDesign-merge {
    margin-top: 20px;
    width: 100%;
}
</style>
